<template>
  <div class="website-layout">
    <!-- 背景装饰 -->
    <div class="website-bg">
      <!-- 渐变背景 -->
      <div class="website-gradient-bg"></div>
      <!-- 柔和的网格 -->
      <div class="website-grid"></div>
    </div>
    
    <!-- 导航栏 -->
    <el-header height="70px" class="website-header">
      <div class="website-nav-container">
        <div class="logo">
          <span class="gradient-text">郑州西亚斯国旗护卫队</span>
        </div>
        <el-menu
          class="nav-menu"
          :default-active="activeIndex"
          mode="horizontal"
          @select="handleSelect">
          <el-menu-item index="/">首页</el-menu-item>
          <el-menu-item index="/about">关于我们</el-menu-item>
          <el-menu-item index="/join">加入我们</el-menu-item>
          <el-menu-item index="/showcase">风采展示</el-menu-item>
          <el-menu-item index="/ai-chat">智能助手</el-menu-item>
          <el-menu-item index="/author">作者介绍</el-menu-item>
        </el-menu>
        <div class="right-menu">
          <template v-if="!isAuthenticated">
            <el-button type="text" @click="$router.push('/login')">登录</el-button>
            <el-button class="gradient-btn" @click="$router.push('/register')">注册</el-button>
          </template>
          <el-dropdown v-else @command="handleCommand">
            <span class="el-dropdown-link">
              用户中心<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="profile">个人信息</el-dropdown-item>
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </el-header>

    <el-main class="website-main">
      <router-view></router-view>
    </el-main>

    <!-- 页脚 -->
    <el-footer height="auto" class="website-footer">
      <div class="footer-content">
        <div class="footer-section">
          <h3 class="gradient-text">联系我们</h3>
          <p><i class="el-icon-message"></i> flagguard@university.edu.cn</p>
          <p><i class="el-icon-phone"></i> 0123-4567890</p>
        </div>
        <div class="footer-section">
          <h3 class="gradient-text">关注我们</h3>
          <div class="social-icons">
            <i class="el-icon-chat-dot-square hover-float"></i>
            <i class="el-icon-share hover-float"></i>
            <i class="el-icon-position hover-float"></i>
          </div>
        </div>
        <div class="footer-section">
          <h3 class="gradient-text">地址</h3>
          <p><i class="el-icon-location"></i> 郑州西亚斯国旗护卫队</p>
        </div>
      </div>
      <div class="footer-bottom">
        <div class="divider"></div>
        <p>© 2024 郑州西亚斯国旗护卫队. All rights reserved.</p>
      </div>
    </el-footer>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'App',
  data() {
    return {
      activeIndex: '/'
    }
  },
  computed: {
    ...mapState(['isAuthenticated'])
  },
  methods: {
    handleSelect(key) {
      if (this.$route.path !== key) {
        this.$router.push(key).catch(err => {
          if (err.name !== 'NavigationDuplicated') {
            throw err
          }
        })
      }
    },
    handleCommand(command) {
      switch (command) {
        case 'profile':
          this.$router.push('/profile').catch(err => {
            if (err.name !== 'NavigationDuplicated') {
              throw err
            }
          })
          break
        case 'logout':
          this.$store.dispatch('logout')
          this.$router.push('/').catch(err => {
            if (err.name !== 'NavigationDuplicated') {
              throw err
            }
          })
          break
      }
    },
    handleLogout() {
      this.$store.dispatch('LogOut').then(path => {
        this.$router.push(path)
      }).catch(err => {
        console.log(err)
      })
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler(to) {
        this.activeIndex = to.path
      }
    }
  }
}
</script>

<style scoped>
.website-layout {
  position: relative;
  min-height: 100vh;
  background: #f6f7ff;
}

.website-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.website-gradient-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f6f7ff 0%, #f0f3ff 100%);
}

.website-grid {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(99, 102, 241, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 102, 241, 0.02) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.7;
}

.website-header {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 3px rgba(99, 102, 241, 0.1);
  backdrop-filter: blur(8px);
}

.website-main {
  position: relative;
  z-index: 1;
  padding: 0;
  min-height: calc(100vh - 140px);
}

.website-footer {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.95);
  border-top: 1px solid rgba(99, 102, 241, 0.1);
}

.website-nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--website-header-height);
  padding: 0 20px;
}

.logo {
  font-size: 24px;
  font-weight: bold;
}

.gradient-text {
  background: var(--website-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav-menu {
  border: none !important;
}

.el-menu--horizontal > .el-menu-item {
  height: var(--website-header-height);
  line-height: var(--website-header-height);
  font-weight: 500;
  color: var(--website-text-primary) !important;
  border-bottom: none !important;
}

.el-menu--horizontal > .el-menu-item:hover,
.el-menu--horizontal > .el-menu-item.is-active {
  color: #6366f1 !important;
  background: linear-gradient(to bottom, transparent 50%, rgba(99, 102, 241, 0.1) 100%);
}

.gradient-btn {
  background: var(--website-primary);
  color: white;
  border: none;
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.gradient-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  padding: 0 20px;
}

.footer-section h3 {
  font-size: 18px;
  margin-bottom: 20px;
}

.footer-section p {
  color: var(--website-text-secondary);
  margin: 10px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.social-icons {
  display: flex;
  gap: 20px;
  margin-top: 15px;
}

.social-icons i {
  font-size: 24px;
  color: var(--website-text-secondary);
  cursor: pointer;
  transition: all 0.3s ease;
}

.hover-float:hover {
  transform: translateY(-4px);
  background: var(--website-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.footer-bottom {
  max-width: 1200px;
  margin: 40px auto 0;
  padding: 20px;
  text-align: center;
  color: var(--website-text-secondary);
}

.divider {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--website-text-secondary), transparent);
  margin-bottom: 20px;
  opacity: 0.2;
}

/* 动画效果 */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
  100% { transform: translateY(0px); }
}

.hover-float {
  animation: float 3s ease-in-out infinite;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .website-nav-container {
    padding: 0 10px;
  }
  
  .logo {
    font-size: 20px;
  }
  
  .gradient-btn {
    padding: 8px 16px;
  }
}

/* 现有样式保持不变，添加以下背景相关样式 */

.app-container {
  position: relative;
  min-height: 100vh;
}

.background-decoration {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* 主渐变背景 */
.gradient-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    #f8f9ff 25%,
    #f0f3ff 50%,
    #f8f9ff 75%,
    #ffffff 100%
  );
}

/* 柔和的网格 */
.soft-grid {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(99, 102, 241, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 102, 241, 0.02) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.7;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .soft-grid {
    background-size: 20px 20px;
  }
}
</style>

<style>
.website-layout {
  --website-primary: #6366f1;
  --website-secondary: #8b5cf6;
  --website-text-primary: #1e293b;
  --website-text-secondary: #64748b;
  --website-header-height: 70px;
  --website-shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
  --website-shadow-md: 0 4px 6px rgba(0,0,0,0.07);
}
</style>
